<template>
  <div>
    <van-nav-bar fixed title="领取提货券" right-text="领取记录" left-arrow @click-left="$utils.back($route.path);" @click-right="$router.push('/deliveryCard/list')" />
    <div class="has-top">
      <div class="mtb-24 mlr-30">
        <div class="bg-white br-14 ptb-70" @click="scan">
          <div class="bg-primary scan-btn">
            <div class="scan-icon">
              <div class="top" />
              <div class="middle" />
              <div class="bottom" />
            </div>
          </div>
          <p class="tac mt-36 fs-32">扫描二维码领取</p>
        </div>
        <p class="mt-32 fs-28 color-gray tac">或</p>
        <p class="mt-32 fs-32 tac">输入卡号领取</p>
        <div class="">
          <van-form ref="subForm" class="">
            <van-field
              v-model="info.couponCode"
              name="卡号"
              label="卡号"
              placeholder="请输入卡号"
              :rules="[{ required: true, message: ' ' }]"
            />
            <van-field
              v-model="info.pwdcode"
              name="密码"
              label="密码"
              placeholder="请输入密码"
              :rules="[{ required: true, message: ' ' }]"
            />
            <div class="tac">
              <button class="submit-btn bg-primary" type="info" @click="handleSubmit">确认</button>
            </div>
          </van-form>
        </div>
      </div>
    </div>

    <!-- 提示弹窗 -->
    <van-dialog v-model="showDialog" :show-cancel-button="false" :show-confirm-button="false" class="dialog">
      <div class="plr-50 fs-28">
        <h2 class="tac fs-34 fw-500 pt-40 pb-20 color-black">提示</h2>
        <p class="pb-30 fs-34  tac color-gray">是否领取提货券？ </p>
      </div>
      <div class="ht fs-32 flex">
        <button class="flex-1 tac lh-100 hr dialog-btn color-black" @click="showDialog=false">返回</button>
        <button class="color-primary flex-1 tac lh-100 dialog-btn" @click="save">确认领取</button>
      </div>
    </van-dialog>

    <!-- 领取成功弹窗 -->
    <van-dialog v-model="showSuccessDialog" :show-cancel-button="false" :show-confirm-button="false" class="success-dialog">
      <div class="success-dialog-box" :style="{backgroundImage:'url('+require('@/assets/images/success-dialog-bg.png')+')',backgroundSize:'100% 100%'}">
        <div class="close-btn" @click="showSuccessDialog=false" />
        <p class="box-title">恭喜成功领取</p>
        <div class="box-money tac flex-center" v-if="modelData.MoneyType !== 100">
          <p class="fs-64 fw-b lh-64 text-show-line-1">{{ modelData.Money }}</p>
          <p v-if="modelData.MoneyType==1" class="fs-32 ">积分</p>
          <p v-if="modelData.MoneyType==2" class="fs-32 ">元</p>
        </div>
				<div class="box-money tac flex-center" v-else>
          <p class="fs-32 fw-b lh-64 text-show-line-1">{{ modelData.CouponPrivilegeWayName }}</p>
				</div>
        <div class="box-discribe">
          <p class="fs-36 fw-b text-show-line-1">{{modelData.MoneyType === 100?modelData.CouponName:modelData.Title }}</p>
          <!-- <p class="fs-28 color-gray-light text-show-line-1">全场通用,买一送一，超值划算</p> -->
        </div>
        <div class="bottom-box flex-s-c">
          <button class="left-btn" @click="showSuccessDialog=false">再次绑定</button>
          <a :href="homeUrl"><button class="right-btn">商城消费</button></a>
        </div>
      </div>
    </van-dialog>
  </div>
</template>
<script>
import { GiveStarcoupon, GiveStarcouponByEnId } from 'api/starcoupon'
export default {
  data: function() {
    return {
      info: {},
      code: '',
      homeUrl: '/',
      modelData: {},
      showDialog: false,
      showSuccessDialog: false,
      isEncryption: false
    }
  },
  created() {
		if(this.$route.query.CouponCode){
			this.info.pwdcode = this.$route.query.PwdCode
			this.info.couponCode = this.$route.query.CouponCode
			this.showDialog = true
		}
  },
  methods: {
    // 扫码领取
    scan() {
      const _this = this
      _this.$utils.Qcode(0, function(data) {
				//data = decodeURIComponent(data)
        console.log(data)
        // if (data.lastIndexOf('-') >= 0) {
        // // 将获取的卡号和密码复制给info
        //   _this.info.pwdcode = data.substring(data.lastIndexOf('-') + 1, data.length)
        //   const leftString = (data.substring(0, data.lastIndexOf('-')))
        //   if (leftString.lastIndexOf('-') >= 0) {
        //     _this.info.couponCode = leftString.substring(leftString.lastIndexOf('-') + 1, leftString.length)
        //   }
        //   console.log(_this.info)
        //   _this.$forceUpdate()
        //   _this.handleSubmit()
        // } else
        if (data.lastIndexOf('-') >= 0) {
          _this.code = data.substring(data.lastIndexOf('-') + 1, data.length)
          _this.isEncryption = true
          _this.showDialog = true
        } else {
          _this.$toast({
            message: '您的券码有误，请查证后重试',
            icon: 'error'
          })
        }
      })
    },
    handleSubmit() {
      this.$refs.subForm.validate().then(() => {
        this.isEncryption = false
        this.showDialog = true
      })
    },
    save() {
      // 这里要调用领取接口了
      this.showDialog = false
      if (this.isEncryption) {
        this.GiveStarcouponByEnId(this.code)
      } else {
        this.GiveStarcoupon(this.info)
      }
    },
    GiveStarcoupon(param) {
      GiveStarcoupon(param).then(res => {
        if (res) {
          this.info = {}
          this.code = ''
          this.modelData = res.Data || {}
          this.homeUrl = res.Data.ShopUrl || '/'
          if(res.State==1){
            this.showSuccessDialog = true
          }
        }
      })
    },
    GiveStarcouponByEnId(param) {
      GiveStarcouponByEnId(param).then(res => {
        if (res) {
          this.info = {}
          this.code = ''
          this.modelData = res.Data || {}
          this.homeUrl = res.Data.ShopUrl || '/'
          if(res.State==1){
            this.showSuccessDialog = true
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.van-nav-bar__right {
  .van-nav-bar__text {
    color: $color3;
  }
}
.scan-btn{
  width: 184px;
  height: 184px;
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
  .scan-icon{
    color: #fff;
    width:70px;
    height: 70px;
    position: absolute;
    top: calc(50% - 35px);
    left: calc(50% - 35px);
    .top:before,.bottom:before,.top:after,.bottom:after{
      content: '';
      width: 16px;
      height: 16px;
      border-radius: 2px;
      border: 4px solid;
      position: absolute;
    }
    .top:before{
      border-color: currentColor currentColor transparent transparent ;
      top:0;
      right: 0;
    }
    .top:after{
      border-color: currentColor transparent transparent currentColor;
      top:0;
      left: 0;
    }
    .bottom:before{
      border-color:  transparent transparent currentColor currentColor;
      bottom:0;
      left: 0;
    }
    .bottom:after{
      border-color:  transparent currentColor currentColor transparent ;
      bottom:0;
      right: 0;
    }
    .middle{
      width: 96px;
      height: 4px;
      position: absolute;
      top: calc(50% - 2px);
      left: -13px;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, #FFFFFF 51%, rgba(255, 255, 255, 0.3) 100%);
    }
  }
}
.van-field{
  margin-top: 12px;
  border-radius: 12px;
  &:after{
    content: none;
  }
}
/deep/.van-field__label{
  width: 61px;
}
.submit-btn{
  margin: 42px auto;
  display: inline-block;
  line-height: 96px;
  padding: 0 108px;
  border-radius: 48px;
  font-size: 36px;
  border: none;
  color: #fff;
}
.dialog{
  /deep/.van-dialog__confirm, .van-dialog__confirm:active{
    @include color-primary();
  }
  .input-1{
    line-height: 3;
    padding: 0 20px;
    background: $colorF7;
    border-radius: 12px;
  }
  .dialog-btn{
    background: $colorF;
    &:active{
      background: $colorF7;
    }
  }
}
.success-dialog{
  background: transparent;
  .success-dialog-box{
    width: 100%;
    height: 0;
    padding-top: 100.3%;
    position: relative;
    .close-btn{
      width: 60px;
      height: 60px;
      border-radius: 50%;
      color:#fff;
      border:4px solid currentColor;
      position: absolute;
      top: 0;
      right: 0;
      &:before,&:after{
        content: '';
        width: 30px;
        height: 4px;
        background: currentColor;
        position: absolute;
        left: calc(50% - 15px);
        top: calc(50% - 2px);
        transform: rotate(45deg);
      }
      &:after{
        transform: rotate(-45deg);
      }
    }
    .box-title{
      position: absolute;
      text-align: center;
      width: 100%;
      font-size: 54px;
      top: 182px;
      color: #FFDC97;
    }
    .box-money{
      width: 212px;
      height: 178px;
      position: absolute;
      left: 30px;
      top: 280px;
      color:#FA0209;
      flex-direction: column;
    }
    .box-discribe{
       width: 300px;
      height: 178px;
      padding: 0 24px;
      position: absolute;
      left: 240px;
      top: 280px;
      display: flex;
      justify-content: center;
      flex-direction: column;
    }
    .bottom-box{
      position: absolute;
      width: 100%;
      bottom: 64px;
      padding: 0 30px;
      .left-btn,.right-btn{
        box-sizing: border-box;
        height: 88px;
        line-height: 88px;
        background: #FDE4A5;
        padding: 0 70px;
        border-radius: 44px;
        color: #FC4243;
        font-size: 32px;
      }
      .left-btn{
        background: transparent;
        color: #FEE3A1;
        line-height: 84px;
        border: 2px solid currentColor;
      }
    }
  }
}

</style>
